<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { SearchOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import { historicalEvents, zhuMembers } from '../../mock/zhu-dynasty/members';

const router = useRouter();
const searchKeyword = ref('');
const resultModalVisible = ref(false);
const resultTab = ref('members');

const searchResults = ref<{
  events: any[];
  knowledge: any[];
  members: any[];
}>({
  members: [],
  events: [],
  knowledge: [],
});

function handleSearch() {
  if (!searchKeyword.value.trim()) {
    message.warning('请输入搜索关键词');
    return;
  }

  const keyword = searchKeyword.value.toLowerCase();

  // 搜索成员
  searchResults.value.members = zhuMembers.filter(
    (m) =>
      m.name.toLowerCase().includes(keyword) ||
      m.title.toLowerCase().includes(keyword) ||
      m.achievements.some((a) => a.toLowerCase().includes(keyword)),
  );

  // 搜索事件
  searchResults.value.events = historicalEvents.filter(
    (e) =>
      e.title.toLowerCase().includes(keyword) ||
      e.description.toLowerCase().includes(keyword),
  );

  // 搜索知识（Mock）
  searchResults.value.knowledge = [
    { id: 'k-1', title: '朱氏家训十则', description: '太祖洪武皇帝亲定' },
    { id: 'k-2', title: '朱氏迁徙路线图', description: '从濠州到南京' },
  ].filter(
    (k) =>
      k.title.toLowerCase().includes(keyword) ||
      k.description.toLowerCase().includes(keyword),
  );

  resultModalVisible.value = true;
}

function formatDate(date: string) {
  return dayjs(date).format('YYYY年MM月DD日');
}

function goToMember(member: any) {
  router.push(`/zhu-family/genealogy?member=${member.id}`);
  resultModalVisible.value = false;
}

function goToEvent(event: any) {
  router.push(`/zhu-family/archive?event=${event.id}`);
  resultModalVisible.value = false;
}

function goToKnowledge(knowledge: any) {
  router.push(`/zhu-family/academy/knowledge?id=${knowledge.id}`);
  resultModalVisible.value = false;
}
</script>

<template>
  <div class="global-search">
    <a-input-search
      v-model:value="searchKeyword"
      placeholder="搜索成员、事件、知识..."
      allow-clear
      enter-button
      size="large"
      @search="handleSearch"
      style="width: 400px"
    >
      <template #prefix>
        <SearchOutlined />
      </template>
    </a-input-search>

    <a-modal
      v-model:open="resultModalVisible"
      title="搜索结果"
      width="800px"
      :footer="null"
    >
      <a-tabs v-model:active-key="resultTab">
        <a-tab-pane key="members" tab="成员">
          <a-list :data-source="searchResults.members" size="small">
            <template #renderItem="{ item }">
              <a-list-item @click="goToMember(item)" style="cursor: pointer">
                <a-list-item-meta>
                  <template #avatar>
                    <a-avatar :src="item.avatar" />
                  </template>
                  <template #title>{{ item.name }} - {{ item.title }}</template>
                  <template #description>第{{ item.generation }}代</template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="events" tab="历史事件">
          <a-list :data-source="searchResults.events" size="small">
            <template #renderItem="{ item }">
              <a-list-item @click="goToEvent(item)" style="cursor: pointer">
                <a-list-item-meta
                  :title="item.title"
                  :description="item.description"
                />
                <div>{{ formatDate(item.date) }}</div>
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>

        <a-tab-pane key="knowledge" tab="知识库">
          <a-list :data-source="searchResults.knowledge" size="small">
            <template #renderItem="{ item }">
              <a-list-item @click="goToKnowledge(item)" style="cursor: pointer">
                <a-list-item-meta
                  :title="item.title"
                  :description="item.description"
                />
              </a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.global-search {
  :deep(.ant-input-search) {
    .ant-input-group-addon {
      background: #1890ff;
    }
  }
}
</style>
